<template>
    <div class="cartList">
        <div class="cart" v-show="isShow">
            <div class="header">
                登录可同步购物车内商品
                <a href="../center" class="a">登录</a>
            </div>
            <div class="middle">
                <div class="icon"></div>
                <span class="shop_car">购物车空空的,快去逛逛吧!</span>
                <a href="../home" class="a2">去逛逛</a>
            </div>
        </div>
        <div class="shop">
            <van-card v-for="item in list" :key="item.gc_id">
                <template #title>
                    <div class="title">
                        {{ item.goods_name | parseName(15) }}
                    </div>
                    <!-- <i @click="del" class="del"></i> -->
                    <br>
                </template>

                <template #price> ￥{{ item.goods_price }}</template>


                <template #thumb>
                    <img :src="item.goods_image" class="tupian" />
                </template>
                <template #num>
                    <div>
                        <button @click="grow">-</button>
                        {{ item.count}}
                        <button @click="drop">+</button>
                    </div>
                </template>
            </van-card>
            <div>
                <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
                    <template #price>
                        <div>
                            item.count * item.goods_price
                        </div>
                    </template>
                    <van-checkbox v-model="checked">全选</van-checkbox>
                </van-submit-bar>
            </div>
            <div>
                <van-submit-bar :price="price" button-text="去结算" @submit="onSubmit">
                    <van-checkbox v-model="checked">全选</van-checkbox>
                </van-submit-bar>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        SubmitBar,
        Checkbox,
        Card
    } from 'vant';
    Vue.use(SubmitBar);
    Vue.use(Checkbox);
    Vue.use(Card);


    export default {
        data() {
            return {
                price: 0,
                checked: false,
                isShow: false,
                list: []
            }
        },
        filters: {
            parseName: function (goods_name, len) {
                if (goods_name.length <= len) return goods_name
                return goods_name.substr(0, len) + "..."
            }
        },
        methods: {
            onSubmit() {

            },
            goDetail(shopId) {
                this.$router.push("/cart/" + shopId)
            },
            grow() {

            },
            drop() {

            },
            del() {

            }
        },
        created() {
            let goods = JSON.parse(localStorage.getItem('list')) || []
            console.log(goods);
            this.list = goods
        },
    }
</script>

<style lang="scss" scoped>
    .title {
        font-size: 16px;
    }

    .cartList {
        margin-bottom: 105px;
    }

    .tupian {
        width: 80px;
        height: 80px;
        margin: 10px -10px;
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 2.5rem;
        background: #fff;
        line-height: 2.5rem;
        font-size: .42rem;
        color: #808080;
        text-align: center;
        z-index: 100;
        margin-bottom: 10px;

    }

    .a {
        border: 1px solid #808080;
        padding: 3px 10px;
        margin-left: 20px;
        font-size: 12px;
        color: #808080;
        list-style: none;
        text-decoration: none;
    }

    .middle {
        position: relative;
        top: 50px;
        padding: 1.8rem 0 1.75rem;
        background: #fff;
        text-align: center;
        width: 100%;
        height: 310px;
    }

    .icon {
        width: 100%;
        height: 7.6rem;
        background: url(//img07.yiguoimg.com/d/web/180313/013112/195558/img_nogoods@3x.png) no-repeat center;
        background-size: auto 100%;
        margin-bottom: 50px;
    }

    .shop_car {
        font-size: 12px;
        color: #808080;
        padding-left: 1px;
    }

    .a2 {
        position: absolute;
        display: inline-block;
        top: 250px;
        left: 125px;
        width: 4.5rem;
        height: 1.2rem;
        border: 1px solid #11b57c;
        border-radius: 6px;
        line-height: 1.2rem;
        font-size: 1.0rem;
        color: #11b57c;
        padding: 8px 15px;
        text-decoration: none;
    }

    .van-submit-bar {
        margin-bottom: 50px;
    }

    .shop {
        position: relative;
        top: 10px;
    }

    .del {
        position: absolute;
        right: 30px;
        top: 10px;
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        background: url(//img07.yiguoimg.com/d/web/180119/01642/141511/del.png) center right no-repeat;
        background-size: 1.0rem 1.0rem;
    }

    .btn {
        position: absolute;
        right: 10px;
        top: 70px;
    }

    .btn span {
        display: inline-block;
        width: 15px;
        height: 5px;
    }
</style>